<template>
    <div class="page">
       
        <div class="order">
            <div class="order-title">
                <div class="order-title-left">
                    <span class="orderNumber">订单编号：{{item.order_no}}</span>
                </div>
            </div>
            <div class="orderContent" v-for="li in item.goods_detail" :key="li.id">
                <div class="orderContent-left">
                    <img :src="li.img" alt="">
                </div>
                <div class="orderContent-right">
                    <strong class="orderContent-right-top">{{li.name}}</strong>
                    <span class="orderContent-right-middle">黑色现货:L</span>
                    <div class="orderContent-right-bottom">
                        <div class="price">
                            <span>￥1000</span>
                            <del>￥2000</del>
                        </div>
                        <div>x1</div>
                    </div>
                </div>
            </div>
            <p class="order-price">商订单金额： ￥60.00</p>
            <div class="orderBottom">
                <div><contDown :endTime="1554876743"></contDown>秒后自动关闭</div>
                <div class="chexiao">
                    <span>撤销申请</span>
                    <span>修改申请</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
    </div>
</template>
<script>
import contDown from "@/components/daojishi/daojishi";

export default {
    components: { contDown },

    props:{
        item:Object
    }
}
</script>
<style scoped>
    .order{padding: 0.25rem}
    .order-title{display: flex;justify-content: space-between;}
    .order-title-left{display: flex;align-items: center;}
    .orderNumber{margin-left: 0.2rem;}
    .orderContent-left{width: 2.28rem;height: 2.28rem;border: 1px solid #e6e6e6;display: flex;justify-content: center;align-items: center;}
    .orderContent-left img{width: 100%;height: 100%;}
    .orderContent{display: flex;justify-content: space-between;margin-top: 0.2rem;padding: 0.2rem 0;border: 1px solid #e6e6ee;border-left: none;border-right: none}
    .orderContent-right{margin-left: 0.25rem;flex: 1;display: flex;justify-content: space-between;flex-direction: column;}
    .orderContent-right-top{font-size: 0.3rem;}
    .orderContent-right-bottom{display: flex;justify-content: space-between;align-items: center;}
    .price span{font-size: 0.36rem;color: #F52E67}
    .price del{font-size: 0.26rem;color: #B3B5B8}
    .order-price{text-align: right;font-size: 0.26rem;margin-top: 0.25rem;}
    .orderBottom{display: flex;justify-content: space-between;margin-top: 0.3rem;}
    .contdown{font-size: 0.28rem;color: #FF663D}
    .chexiao span{font-size: 0.28rem;color: #F52E67}
    .chexiao span:nth-child(1){margin-right: 0.3rem;}
    .null{height: 0.2rem;background: #F5F6F7;}
    .orderContent-right-middle{background: #F5F5F6;width: 1.5rem;color: #B9BABD;padding: 2px}

</style>


